<template>
  <div>
    <a-card title="用户管理" style="width: 100%">
      <div slot="extra" class="add-box">
        <a-space>
          <a-button
            type="primary"
            @click="add"
            :disabled="userState <= 2 ? false : true"
          >
            新增</a-button
          >
          <a-input-search
            placeholder="输入关键词"
            enter-button
            @search="onSearch"
            class="search"
          />
        </a-space>
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        :row-key="(record) => record.id"
        :pagination="pagination"
        @change="change"
      >
        <div slot="btn" slot-scope="row" class="btn-box">
          <a-button
            type="primary"
            @click="edit(row)"
            :disabled="userState <= 2 ? false : true"
          >
            修改
          </a-button>
          <a-button
            type="danger"
            @click="del(row.id)"
            :disabled="userState <= 2 ? false : true"
          >
            删除
          </a-button>
        </div>
      </a-table>
    </a-card>
    <a-modal
      v-model="visible"
      title="修改"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
    >
      <a-form-model
        :model="editFrom"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="账号">
          <a-input v-model="editFrom.email" />
        </a-form-model-item>
        <a-form-model-item label="密码">
          <a-input v-model="editFrom.password" />
        </a-form-model-item>
        <a-form-model-item label="用户名">
          <a-input v-model="editFrom.username" />
        </a-form-model-item>
        <a-form-model-item label="账号权限">
          <a-select v-model="editFrom.state" placeholder="请选择权限等级">
            <a-select-option value="1">超级管理员</a-select-option>
            <a-select-option value="2">超市店长</a-select-option>
            <a-select-option value="3"> 基本权限</a-select-option>
            <a-select-option value="4">部分权限</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="电话">
          <a-input v-model="editFrom.userTel" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      v-model="addVisible"
      title="增加用户"
      ok-text="确认"
      cancel-text="取消"
      @ok="addhideModal"
    >
      <a-form-model
        :model="addFrom"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="账号">
          <a-input v-model="addFrom.email" />
        </a-form-model-item>
        <a-form-model-item label="密码">
          <a-input v-model="addFrom.password" />
        </a-form-model-item>
        <a-form-model-item label="用户名">
          <a-input v-model="addFrom.username" />
        </a-form-model-item>
        <a-form-model-item label="账号权限">
          <a-select v-model="addFrom.state" placeholder="请选择权限等级">
            <a-select-option value="1">超级管理员</a-select-option>
            <a-select-option value="2">超市店长</a-select-option>
            <a-select-option value="3"> 基本权限</a-select-option>
            <a-select-option value="4">部分权限</a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="电话">
          <a-input v-model="addFrom.userTel" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: "id",
    title: "编号",
  },
  {
    dataIndex: "email",
    title: "账号",
  },

  {
    dataIndex: "userTel",
    title: "电话",
  },
  {
    dataIndex: "username",
    title: "用户名",
  },
  {
    dataIndex: "role",
    title: "权限",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "btn" },
  },
];

import { GetUser, AddUser, UpdateUser, DelUser } from "../../network/user";
export default {
  data() {
    return {
      userState: null,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      layout: "horizontal",
      data: [],
      columns,
      chooseId: "",
      visible: false,
      addVisible: false,
      addFrom: {
        username: "",
        email: "",
        password: "",
        state: "",
        userTel: "",
        roleState: this.$store.state.state,
      },
      editFrom: {
        id: "",
        username: "",
        email: "",
        password: "",
        state: "",
        userTel: "",
        roleState: this.$store.state.state,
      },
      pagination: {
        pageSize: 5,
        current: 1,
        total: 0,
      },
      keyWord: "",
    };
  },
  created() {
    this.getTableData(this.keyWord);
    this.userState = this.$store.state.state;
    // console.log(this.userState);
  },
  methods: {
    getTableData(data) {
      GetUser({ username: data, roleState: this.$store.state.state }).then(
        (res) => {
          this.pagination.total = Number(res.data.totalSize);
          this.data = res.data.data;
          console.log(this.data);
        }
      );
    },
    edit(data) {
      //   this.chooseId = id;

      console.log(data);
      this.editFrom.username = data.username;
      // console.log(data.username);
      this.editFrom.email = data.email;
      this.editFrom.password = data.password;
      this.editFrom.state = data.state;
      this.editFrom.id = data.id;
      this.editFrom.userTel = data.userTel;
      // console.log(this.editFrom);
      this.visible = true;
    },
    add() {
      this.addVisible = true;
    },
    hideModal() {
      console.log(this.editFrom);
      UpdateUser(this.editFrom).then(() => {
        this.getTableData(this.keyWord);
      });
      this.visible = false;
    },
    addhideModal() {
      AddUser(this.addFrom).then((res) => {
        this.getTableData(this.keyWord);
        console.log(res);
        this.addVisible = false;
      });
    },
    del(id) {
      DelUser({ id: id, roleState: this.$store.state.state }).then(() => {
        this.getTableData(this.keyWord);
      });
    },
    change(e) {
      console.log(e);
      this.pagination.current = e.current;
    },
    onSearch(e) {
      this.getTableData(e);
    },
  },
};
</script>

<style>
.btn-box {
  width: 60%;
  display: flex;
  justify-content: space-around;
}
.add-box {
  width: 400px;
  display: flex;
  justify-content: space-around;
}
</style>